<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <!--以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%-->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="asset/plugins/weui/css/weui.min.css?rev=@@hash">
    <link rel="stylesheet" href="asset/plugins/jquery-weui/css/jquery-weui.min.css?rev=@@hash">
    <link rel="stylesheet" href="asset/plugins/iconfont/iconfont.css?rev=@@hash">
    <link rel="stylesheet" href="asset/plugins/mescroll/mescroll.min.css?rev=@@hash">

    <link rel="stylesheet" href="asset/css/p-index.css?rev=@@hash">
    <!---->
    <!--<script type="text/javascript" src="asset/plugins/rem2px/hd_adapter_rem2px.js"></script>-->
</head>
<body>
<!--header 开始-->
<header class="m-page-header">
    <!--排行榜 开始-->
    <div class="m-ranking-list weui-flex js-msg-list">
        <div class="weui-flex__item m-ranking_content-wrap ">
            <ul class="m-ranking_content g-clearfix">
                <li>
                    <p class="m-ranking_content_comment">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <span class="m-ranking_name">111用户姓名</span>
                        <img class="m-ranking_avatar g-img-bordered" src="asset/images/avatar/a9.jpg" alt="">
                        <span class="m-ranking_text">大官人豪掷千金，打赏</span>
                        <span class="m-ranking_name">工号21</span>
                        <img class="m-ranking_avatar g-img-bordered" src="asset/images/avatar/a9.jpg" alt="">
                        <span class="g-c--orange">礼物名字</span>
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                        <img src="asset/images/gift/gift.png" alt="" class="m-ranking_gift">
                    </p>
                </li>

            </ul>
        </div>
        <div class="m-ranking_link-wrap">
            <a href="javascript:;" class="m-ranking_link weui-btn_orange open-popup" data-target="#rankingList"><i
                    class="iconfont icon-paihangbang"></i><span>排行榜</span></a>
        </div>
    </div>
    <!--排行榜 结束-->
    <!--轮播图 开始-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="asset/images/banner/sucai1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="asset/images/banner/sucai2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="asset/images/banner/sucai1.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!--轮播图 结束-->
    <!--地址栏 开始-->
    <div class="weui-flex m-address-bar">
        <div class="p-address_city-wrap">
            <div class="m-address-bar_city">
                <i class="iconfont icon-youxiasanjiao-copy"></i>
                <span></span>
                <input id='city-picker' class="weui-input" type="text" value="浙江省 绍兴市">
            </div>
        </div>
        <div class="weui-flex__item m-address-bar_input-group">
            <label for="address-more" class="js-address_label">
                <i class="iconfont icon-search"></i>
                请输入店面、地址等
            </label>
            <input id="address-more" class="p-address_more" type="text">
        </div>
        <!--.js-addLi 是测试顶部打赏消息栏新增消息发生的情况，可删除该class-->
        <div class="p-address_search-wrap">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_orange m-address-bar_search js-addLi">搜索</a>
        </div>
    </div>
    <!--地址栏 开始-->
</header>
<!--header 结束-->
<!--内容 开始-->
<div class="m-container-wrap p-index js-container-wrap">
    <section class="m-container">
        <div id="js-shop-list" class="weui-panel weui-panel_access m-weui-panel--shop mescroll">
            <div id="js-shop-list_inner" class="weui-panel__bd">
                <a href="waiter.html" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/banner/sucai3.jpg" alt=""
                                                         class="weui-media-box__thumb"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">某某足浴店</h4>
                        <p class="weui-media-box__desc m-media_box_help g-c--orange">绍兴市越城区迪荡湖路321号</p>
                        <p class="weui-media-box__desc">本药店主打药浴足浴，百年老字号中药足浴配方。本药店主打药浴足浴，百年老字号中药足浴配方。</p>
                        <div class="m-info-help g-ta--r">
                            <p class="m-help-text">距离：≤100米</p>
                        </div>
                    </div>
                    <i class="iconfont icon-enter"></i>
                </a>
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/banner/sucai3.jpg" alt=""
                                                         class="weui-media-box__thumb"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">某某足浴店</h4>
                        <p class="weui-media-box__desc m-media_box_help g-c--orange">绍兴市越城区迪荡湖路321号</p>
                        <p class="weui-media-box__desc">本药店主打药浴足浴，百年老字号中药足浴配方。本药店主打药浴足浴，百年老字号中药足浴配方。</p>
                        <div class="m-info-help g-ta--r">
                            <p class="m-help-text">距离：≤100米</p>
                        </div>
                    </div>
                    <i class="iconfont icon-enter"></i>
                </a>
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/banner/sucai3.jpg" alt=""
                                                         class="weui-media-box__thumb"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">某某足浴店</h4>
                        <p class="weui-media-box__desc m-media_box_help g-c--orange">绍兴市越城区迪荡湖路321号</p>
                        <p class="weui-media-box__desc">本药店主打药浴足浴，百年老字号中药足浴配方。本药店主打药浴足浴，百年老字号中药足浴配方。</p>
                        <div class="m-info-help g-ta--r">
                            <p class="m-help-text">距离：≤100米</p>
                        </div>
                    </div>
                    <i class="iconfont icon-enter"></i>
                </a>
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd"><img src="asset/images/banner/sucai3.jpg" alt=""
                                                         class="weui-media-box__thumb"></div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">某某足浴店</h4>
                        <p class="weui-media-box__desc m-media_box_help g-c--orange">绍兴市越城区迪荡湖路321号</p>
                        <p class="weui-media-box__desc">本药店主打药浴足浴，百年老字号中药足浴配方。本药店主打药浴足浴，百年老字号中药足浴配方。</p>
                        <div class="m-info-help g-ta--r">
                            <p class="m-help-text">距离：≤100米</p>
                        </div>
                    </div>
                    <i class="iconfont icon-enter"></i>
                </a>
            </div>
        </div>
    </section>

</div>
<!--内容 结束-->
<a data-target="#comment" href="javascript:;" class="m-btn-tel m-btn-shadow animated bounceInUp"><i
        class="iconfont icon-dianhua-1"></i><span>预约热线</span></a>
<a data-target="#comment" href="personal-center.html" class="m-btn-personal m-btn-shadow animated bounceInUp"><i
        class="iconfont icon-gerenzhongxin"></i><span>个人中心</span></a>
<!--弹出层-排行榜 start-->
<div id="rankingList" class="weui-popup__container weui-popup--foot-bath weui-popup--sm">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="m-modal_header">
            <h3 class="m-modal_title--img">打赏排行榜<img src="asset/images/img-global/renqizhixing.png" alt=""></h3>
            <a href="javascript:;" class="m-modal_header_closed close-popup">
                <i class="iconfont icon-quxiao"></i>
            </a>
        </div>
        <div class="m-modal_body">
            <div class="g-overflow-wrap-y mescroll" id="js-mescroll-popup">
                <div id="js-ranking-data" class="weui-cells m-cells--ranking m-cells--ranking-popular">
                    <div class="weui-cell weui-cell_access">
                        <img class="m-ranking-first" src="asset/images/gift/first.png" alt="">
                        <div class="m-ranking-avatar">
                            <img class="m-avatar_top" src="asset/images/gift/frame.png" alt="">
                            <img class="m-avatar_bottom" src="asset/images/avatar/a9.jpg" alt="">
                        </div>
                        <p class="m-ranking_nickname">
                            工号：021
                        </p>
                        <div class="p-gift">
                            <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                            <p class="p-gift-text">×<span>321</span>人气</p>
                        </div>
                        <p class="m-ranking_total">
                            累积获赏：<span>9999.00</span>元
                        </p>
                        <div class="m-ranking-shop">
                            <h4 class="m-ranking-shop_name">· 绍兴某某足浴 ·</h4>
                            <p class="m-ranking-shop_address">绍兴市越城区迪荡湖路321号</p>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_access">
                        <img class="m-ranking-first" src="asset/images/gift/first.png" alt="">
                        <div class="m-ranking-avatar">
                            <img class="m-avatar_top" src="asset/images/gift/frame.png" alt="">
                            <img class="m-avatar_bottom" src="asset/images/avatar/a9.jpg" alt="">
                        </div>
                        <p class="m-ranking_nickname">
                            工号：021
                        </p>
                        <div class="p-gift">
                            <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                            <p class="p-gift-text">×<span>321</span>人气</p>
                        </div>
                        <p class="m-ranking_total">
                            累积获赏：<span>9999.00</span>元
                        </p>
                        <div class="m-ranking-shop">
                            <h4 class="m-ranking-shop_name">· 绍兴某某足浴 ·</h4>
                            <p class="m-ranking-shop_address">绍兴市越城区迪荡湖路321号</p>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_access">
                        <img class="m-ranking-first" src="asset/images/gift/first.png" alt="">
                        <div class="m-ranking-avatar">
                            <img class="m-avatar_top" src="asset/images/gift/frame.png" alt="">
                            <img class="m-avatar_bottom" src="asset/images/avatar/a9.jpg" alt="">
                        </div>
                        <p class="m-ranking_nickname">
                            工号：021
                        </p>
                        <div class="p-gift">
                            <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                            <p class="p-gift-text">×<span>321</span>人气</p>
                        </div>
                        <p class="m-ranking_total">
                            累积获赏：<span>9999.00</span>元
                        </p>
                        <div class="m-ranking-shop">
                            <h4 class="m-ranking-shop_name">· 绍兴某某足浴 ·</h4>
                            <p class="m-ranking-shop_address">绍兴市越城区迪荡湖路321号</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--弹出层-排行榜 end-->

<script type="text/javascript" src="asset/plugins/jquery/jquery-2.2.4.min.js?rev=@@hash"></script>
<script type="text/javascript" src="asset/plugins/jquery-weui/js/jquery-weui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="asset/plugins/swiper/swiper.min.js?rev=@@hash"></script>
<script type="text/javascript" src="asset/plugins/jquery-weui/js/city-picker.min.js?rev=@@hash"></script>
<script src="asset/plugins/mescroll/mescroll.min.js"></script>
<!--p-index.js-->
<script type="text/javascript" src="asset/js/p-index.js?rev=@@hash"></script>
<script type="text/javascript" src="asset/js/m-draw-bar.js?rev=@@hash"></script>

<script>
    $(function () {
        /*联网加载列表数据*/
        function getListDataFromNet(json,pageNum, pageSize, successCallback, errorCallback) {
            //延时一秒,模拟联网
//            setTimeout(function () {
                $.ajax({
                    type: 'GET',
//                    url: 'asset/data/data-index_shop-first.json',
                    url: json+'?num=' + pageNum + "&size=" + pageSize,
                    dataType: 'json',
                    success: function (data) {
//                    var data=lists; // 模拟数据: ../res/pdlist1.js
                        //模拟分页数据
                        var listData = [];
                        for (var i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
                            if (i == data.length) break;
                            listData.push(data[i]);
                        }
                        console.log(listData);
                        successCallback(listData);
                    },
                    error: errorCallback
                });
//            }, 1000)
        }

        /*弹出层-------------------------------------------------------------------------------*/
        var mescroll = new MeScroll("js-mescroll-popup", { //第一个参数"mescroll"对应上面布局结构div的id
            up: {
                clearEmptyId: "js-ranking-data", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
                page:{size:2},
                loadFull:{
                  use:true
                },
                callback: getListData //上拉加载回调,简写callback:function(page){upCallback(page);}
            }
        });


        /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */

        function getListData(page) {
            //联网加载数据
            var json="asset/data/data-index_shop-first.json";
            console.log("page.num-list="+page.num);
            getListDataFromNet(json,page.num, page.size, function (data) {
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll.endSuccess(data.length);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
                setListData(data);
            }, function () {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll.endErr();
            });
        }

        /*设置列表数据*/
        function setListData(data) {
            var listDom = document.getElementById("js-ranking-data");

            for (var i = 0; i < data.length; i++) {
                var pd = data[i];
                var html_add = `<div class="weui-cell weui-cell_access">
                            <img class="m-ranking-first" src="asset/images/gift/first.png" alt="">
                            <div class="m-ranking-avatar">
                                <img class="m-avatar_top" src="asset/images/gift/frame.png" alt="">
                                <img class="m-avatar_bottom" src="${pd.img_src}" alt="">
                            </div>
                            <p class="m-ranking_nickname">
                                工号：${pd.waiterNum}
                            </p>
                            <div class="p-gift">
                                <img class="p-gift-img" src="asset/images/gift/gift.png" alt="礼物">
                                <p class="p-gift-text">×<span>${pd.popularity}</span>人气</p>
                            </div>
                            <p class="m-ranking_total">
                                累积获赏：<span>${pd.money}</span>元
                            </p>
                            <div class="m-ranking-shop">
                                <h4 class="m-ranking-shop_name">· ${pd.shop_name} ·</h4>
                                <p class="m-ranking-shop_address">${pd.address}</p>
                            </div>
                        </div>`;
                $(listDom).append(html_add);
            }
        }


        /*店铺加载-------------------------------------------------------------------------------------------*/
        var mescroll_shop = new MeScroll("js-shop-list", {
            up: {
                clearEmptyId: "js-shop-list_inner",
                page:{size:1},//每次加载1条数据,模拟loadFull
                loadFull: {
                    use: true, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
                    delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
                },
                callback: gitShopList
            }
        });
        function gitShopList(page) {
            //联网加载数据
            var json="asset/data/data-index_shop.json";
            console.log("page.num-shop="+page.num);
            getListDataFromNet(json,page.num, page.size, function (data) {
                mescroll_shop.endSuccess(data.length);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                setShopListData(data);
            }, function () {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll_shop.endErr();
            });
        }
        /*设置列表数据*/
        function setShopListData(data) {
            var listDom = document.getElementById("js-shop-list_inner");

            for (var i = 0; i < data.length; i++) {
                var list = data[i];

                var html_add = `<a href="waiter.html" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd"><img src="${list.img_src}" alt="" class="weui-media-box__thumb"></div>
                                <div class="weui-media-box__bd">
                                    <h4 class="weui-media-box__title">${list.shop_name}</h4>
                                    <p class="weui-media-box__desc m-media_box_help g-c--orange">${list.address}</p>
                                    <p class="weui-media-box__desc">${list.text}</p>
                                    <div class="m-info-help g-ta--r">
                                        <p class="m-help-text">${list.distance}</p>
                                    </div>
                                </div>
                                <i class="iconfont icon-enter"></i>
                            </a>`;
                $(listDom).append(html_add);
            }
        }


        //禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
        document.ondragstart = function () {
            return false;
        }


    });

</script>
</body>
</html>